﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DeWeb</title>
</head>

<body style="background-color:#F0F0F0">

	<style type="text/css">
		#Loading {
			top: 50%;
			left: 50%;
			position: absolute;
			-webkit-transform: translateY(-50%) translateX(-50%);
			transform: translateY(-50%) translateX(-50%);
			z-index: 100;
		}

		@-webkit-keyframes ball-beat {
			50% {
				opacity: 0.2;
				-webkit-transform: scale(0.75);
				transform: scale(0.75);
			}

			100% {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}

		@keyframes ball-beat {
			50% {
				opacity: 0.2;
				-webkit-transform: scale(0.75);
				transform: scale(0.75);
			}

			100% {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}

		.ball-beat>div {
			background-color: #279fcf;
			width: 15px;
			height: 15px;
			border-radius: 100% !important;
			margin: 2px;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			display: inline-block;
			-webkit-animation: ball-beat 0.7s 0s infinite linear;
			animation: ball-beat 0.7s 0s infinite linear;
		}

		.ball-beat>div:nth-child(2n-1) {
			-webkit-animation-delay: 0.35s !important;
			animation-delay: 0.35s !important;
		}





		/* 动画加载 */
		#loader-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999999;
			background: #fff;
		}

		#loader {
			display: block;
			position: relative;
			left: 50%;
			top: 50%;
			width: 150px;
			height: 150px;
			margin: -75px 0 0 -75px;
			border-radius: 50%;
			border: 3px solid transparent;
			/* COLOR 1 */
			border-top-color: #000;
			-webkit-animation: spin 2s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-ms-animation: spin 2s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-moz-animation: spin 2s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-o-animation: spin 2s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			animation: spin 2s linear infinite;
			/* Chrome, Firefox 16+, IE 10+, Opera */
			z-index: 1001;
		}

		#loader:before {
			content: "";
			position: absolute;
			top: 5px;
			left: 5px;
			right: 5px;
			bottom: 5px;
			border-radius: 50%;
			border: 3px solid transparent;
			/* COLOR 2 */
			border-top-color: #000;
			-webkit-animation: spin 3s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-moz-animation: spin 3s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-o-animation: spin 3s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-ms-animation: spin 3s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			animation: spin 3s linear infinite;
			/* Chrome, Firefox 16+, IE 10+, Opera */
		}

		#loader:after {
			content: "";
			position: absolute;
			top: 15px;
			left: 15px;
			right: 15px;
			bottom: 15px;
			border-radius: 50%;
			border: 3px solid transparent;
			border-top-color: #000;
			/* COLOR 3 */
			-moz-animation: spin 1.5s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-o-animation: spin 1.5s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-ms-animation: spin 1.5s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			-webkit-animation: spin 1.5s linear infinite;
			/* Chrome, Opera 15+, Safari 5+ */
			animation: spin 1.5s linear infinite;
			/* Chrome, Firefox 16+, IE 10+, Opera */
		}


		@-webkit-keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: rotate(0deg);
				/* IE 9 */
				transform: rotate(0deg);
				/* Firefox 16+, IE 10+, Opera */
			}

			100% {
				-webkit-transform: rotate(360deg);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: rotate(360deg);
				/* IE 9 */
				transform: rotate(360deg);
				/* Firefox 16+, IE 10+, Opera */
			}
		}

		@keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: rotate(0deg);
				/* IE 9 */
				transform: rotate(0deg);
				/* Firefox 16+, IE 10+, Opera */
			}

			100% {
				-webkit-transform: rotate(360deg);
				/* Chrome, Opera 15+, Safari 3.1+ */
				-ms-transform: rotate(360deg);
				/* IE 9 */
				transform: rotate(360deg);
				/* Firefox 16+, IE 10+, Opera */
			}
		}

		#loader-wrapper .loader-section {
			position: fixed;
			top: 0;
			width: 51%;
			height: 100%;
			background: #fff;
			/* opacity: 0.7; */
			/* Old browsers */
			z-index: 1000;
			-webkit-transform: translateX(0);
			/* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: translateX(0);
			/* IE 9 */
			transform: translateX(0);
			/* Firefox 16+, IE 10+, Opera */
		}

		#loader-wrapper .loader-section.section-left {
			left: 0;
		}

		#loader-wrapper .loader-section.section-right {
			right: 0;
		}

		/* Loaded */

		.loaded #loader-wrapper .loader-section.section-left {
			-webkit-transform: translateX(-100%);
			/* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: translateX(-100%);
			/* IE 9 */
			transform: translateX(-100%);
			/* Firefox 16+, IE 10+, Opera */
			-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		}

		.loaded #loader-wrapper .loader-section.section-right {
			-webkit-transform: translateX(100%);
			/* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: translateX(100%);
			/* IE 9 */
			transform: translateX(100%);
			/* Firefox 16+, IE 10+, Opera */
			-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		}

		.loaded #loader {
			opacity: 0;
			-webkit-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

		.loaded #loader-wrapper {
			visibility: hidden;
			-webkit-transform: translateY(-100%);
			/* Chrome, Opera 15+, Safari 3.1+ */
			-ms-transform: translateY(-100%);
			/* IE 9 */
			transform: translateY(-100%);
			/* Firefox 16+, IE 10+, Opera */
			-webkit-transition: all 0.3s 1s ease-out;
			transition: all 0.3s 1s ease-out;
		}

		/* JavaScript Turned Off */

		.no-js #loader-wrapper {
			display: none;
		}

		.no-js h1 {
			color: #222222;
		}

		#loader-wrapper .load_title {
			font-family: 'Open Sans';
			color: rgb(245, 245, 245);
			font-size: 19px;
			width: 100%;
			text-align: center;
			z-index: 9999999999999;
			position: absolute;
			top: 36px;
			opacity: 1;
			line-height: 30px;
		}

		#loader-wrapper .load_title span {
			font-weight: normal;
			font-style: italic;
			font-size: 13px;
			color: rgb(220, 220, 220);
			opacity: 0.5;
		}

		/*旋转动画*/
		@keyframes moveover {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.box {
			position: relative;
			width: 100px;
			height: 100px;
			margin: 18% auto;
			/*整体旋转*/
			animation: moveover 3s linear infinite;
		}

		.box_text {
			position: absolute;
			top: 0;
			left: 0;
		}

		.box::before {
			content: "";
			position: absolute;
			width: 50px;
			height: 100px;
			border-radius: 50px 0 0 50px;
			/* 起始最深颜色为 #999，过渡到中间颜色为 rgb(220, 220, 220)*/
			background: linear-gradient(#999, rgb(220, 220, 220));
			/* 旋转的圈圈颜色 */
			background-color: #999;
			z-index: 2;
		}

		.box2 {
			position: absolute;
			width: 50px;
			height: 100px;
			border-radius: 0 50px 50px 0;
			left: 50%;
			/* 起始最深颜色为 rgb(255, 255, 255)，过渡到中间颜色为 rgb(220, 220, 220)*/
			background: linear-gradient(rgb(255, 255, 255), rgb(220, 220, 220));
			z-index: 1;
		}

		.box::after {
			content: "";
			position: absolute;
			width: 92px;
			height: 92px;
			top: 4px;
			left: 4px;
			border-radius: 50%;
			background-color: #fff;
			z-index: 2;
		}

		.wrapper {
			position: relative;
		}
	</style>
	<div id="loader-wrapper">
		<div class="wrapper">
			<div class='box'>
				<div class="box2"></div>
			</div>
			<div class="load_title">DeWeb
			</div>

		</div>
	</div>

	<!-- 引入组件库 -->
	<script src="dist/vue.js" type="text/javascript"></script>
	<script src="dist/index.js" type="text/javascript"></script>
	<script src="dist/axios.min.js" type="text/javascript"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" type="text/css" href="dist/theme-chalk/index.css" />

	<div id="app"
		style="position:absolute;overflow:hidden;left:0;right:0;bottom:0;margin: 0 auto;background-color:#FFFFFF"
		:style="{top:Default_1__t,width:Default_1__w,height:Default_1__h}">
		<el-button v-if="version__istrial" type="success" @click="this.window.open('http://www.web0000.com/buy')"
			size="mini" icon="el-icon-shopping-cart-2" style="position:relative;z-index:999;float:right;margin:10px;">Buy Now!
		</el-button>
		<el-dialog :title="input_query_caption" :visible.sync="input_query_visible">
			<el-form style="width:90%;padding-left:5%;">
				<el-form-item :label="input_query_inputname">
					<el-input v-model="input_query_inputdefault" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="input_query_visible=false">{{input_query_cancelcaption}}</el-button>
				<el-button type="primary" @click="processinputquery">{{input_query_okcaption}}</el-button>
			</div>
		</el-dialog>
		<label v-if="Label1__visible" :disabled="Label1__disabled"
			:style="{left:Label1__l,top:Label1__t,width:Label1__w,height:Label1__h}"
			style="position:absolute;color:#000000;font-family:'微软雅黑';font-size:16pt;font-weight:bold;font-style:normal;text-decoration:none;">{{Label1}}</label>
		<label v-if="Label2__visible" :disabled="Label2__disabled"
			:style="{left:Label2__l,top:Label2__t,width:Label2__w,height:Label2__h}"
			style="position:absolute;color:#000000;font-family:'微软雅黑';font-size:11pt;font-weight:normal;font-style:normal;text-decoration:none;">{{Label2}}</label>
		<el-button v-if="Btn_Next__visible" size="medium" :disabled="Btn_Next__disabled" type="success"
			:style="{left:Btn_Next__l,top:Btn_Next__t,width:Btn_Next__w,height:Btn_Next__h}" style="position:absolute;"
			@click="Btn_Next__onclick">{{Btn_Next}}</el-button>
	</div>
	<script>
		Vue.prototype.procResp = function (resp) {
			if (resp.mode === "update") {
				eval(String(resp.code));
			} else if (resp.mode === "showform") {
				document.open(); document.write(String(resp.code));
			}
		}
		new Vue(
			{
				el: '#app',
				data: function () {
					return {
						Default_1__l: "0px",
						Default_1__t: "0px",
						Default_1__w: "360px",
						Default_1__h: "720px",
						Label1: 'DeWeb : Delphi -Web',
						Label1__visible: true,
						Label1__disabled: false,
						Label1__l: "32px",
						Label1__t: "24px",
						Label1__w: "291px",
						Label1__h: "28px",
						Label2: 'DeWeb是一个可以直接将Delphi程序快速转换为网页应用的工具！使用DeWeb, 开发者不需要学习HTML、JavaScript、Java、PHP、ASP、C#等新知识，用Delphi搞定一切。 DeWeb开发的网页支持所有客户端，包括手机、平板等。 ',
						Label2__visible: true,
						Label2__disabled: false,
						Label2__l: "21px",
						Label2__t: "80px",
						Label2__w: "302px",
						Label2__h: "120px",
						Btn_Next: 'Next',
						Btn_Next__visible: true,
						Btn_Next__disabled: false,
						Btn_Next__l: "53px",
						Btn_Next__t: "632px",
						Btn_Next__w: "252px",
						Btn_Next__h: "41px",
						input_query_visible: false,
						input_query_caption: "Input Query",
						input_query_inputname: "new",
						input_query_cancelcaption: "Cancel",
						input_query_okcaption: "OK",
						input_query_inputdefault: "",
						input_query_method: "processinputquery",
						input_query_visible: false,
						version__istrial: false,
						clientid: 0
					}
				},
				mounted() {
					let me = this;
					window.addEventListener(
						"onorientationchange" in window ? "orientationchange" : "resize",
						function () {
							axios.get('{"mode":"event","cid":0,"component":"screen","orientation":"' + window.orientation + '","width":' + screen.width + ',"height":' + screen.height + '}')
								.then(resp => { me.procResp(resp.data) });
						},
						false
					);
					let Default_1hearttimer = window.setInterval(function () {
						axios.get('{"mode":"heart","cid":0}')
							.then(resp => { me.procResp(resp.data) });
					}, 30000);

				},
				methods: {
					Btn_Next__onclick() {
						axios.get('{"mode":"event","cid":0,"component":"Btn_Next","event":"onclick"}')
							.then(resp => { this.procResp(resp.data) });
					},
					processinputquery(val) {
						this.input_query_visible = false;
						axios.get('{"mode":"interaction","cid":0,"class":"inputquery","method":"' + this.input_query_method + '","value":"' + this.input_query_inputdefault + '"}')
							.then(resp => { this.procResp(resp.data) });
					},
				},
				created() {
					document.body.removeChild(document.getElementById('Loading'))
				},
				beforeDestroy() {
					clearInterval(hearttimer);
				}
			}
		);                                                                         
	</script>
</body>
<script>
		// 挂在Dome完毕,关闭动画
		function Lodinng () {
			document.getElementById("loader-wrapper").style.display = "none"
		} // 由于项目太小，加载速度较快，建议设延时关闭，才有效果
		Lodinng()
</script>

</html>